<template>
  <div>
<!--===-->

    <!--页面头-->
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="#">学生选课管理</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
<!--            <a href="/Course">课程管理</a>-->
            <li><router-link :to="{path:'/Course'}" replace>课程管理</router-link></li>
            <li><router-link :to="{path:'/Login'}" replace>学生管理</router-link></li>
            <li><router-link :to="{path:'/coursemage'}" replace>选课管理</router-link></li>
            <li><router-link :to="{path:'/Stucou'}" replace>选课明细表</router-link></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <!--页面表头结尾-->

    <!--学生信息表格-->
    <div id="student">
      <!--学号/姓名查询表单-->
      <form class="form-inline">
        <div class="form-group">
          <input type="text" class="form-control" v-model="sname" placeholder="输入学号/姓名">
        </div>
        <button type="button" class="btn btn-default" @click="queryParams">
          <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        </button>
      </form>
      <br/>
      <table class="table table-hover">
        <thead bgcolor="#dcdcdc">
        <th></th>
        <th>学号</th>
        <th>姓名</th>
        <th>专业</th>
        <th>入学时间</th>
        <th>备注</th>
        <th></th>
        </thead>
        <tr v-for="stu in studentList">
          <td>
            <input type="checkbox" name="removeCks" :value="stu.sid" style="display: none;">
          </td>
          <td v-text="stu.sid"></td>
          <td v-text="stu.sname"></td>
          <td v-text="stu.smajor"></td>
          <td v-text="stu.sdate"></td>
          <td v-text="stu.sremark"></td>
          <td>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModalEdit" @click="toEdit(stu.sid)">
              <span class="glyphicon glyphicon-tags" aria-hidden="true"></span>&nbsp;&nbsp;修改
            </button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModalDel" @click="removeStu(stu.sid)">
              <span class="glyphicon glyphicon-remove-circle"  aria-hidden="true"></span>&nbsp;&nbsp;删除
            </button>
            <!--删除模态框-->
            <!-- Modal -->
            <div class="modal fade" id="myModalDel" tabindex="-1" role="dialog" aria-labelledby="myModalLableDel">
              <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLableDel">删除确认</h4>
                  </div>
                  <div class="modal-body">
                    确定要删除学号为{{stuNoId}}的学生吗？
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="removeStuOk(stuNoId)">确定</button>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>

      <!--修改模态框-->
      <div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
<!--          action="http://localhost:8001/student/edit"-->
          <form class="form-horizontal" id="form_edit" @submit="editStu" >
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">修改学生</h4>
              </div>
              <div class="modal-body">

                <!--编号-->
                <div class="form-group">
                  <label for="sId" class="col-sm-2 control-label">编号</label>
                  <div class="col-sm-10">
                    <input type="hidden" v-model="stuToEdti.sid" >
                    <input type="text" v-model="stuToEdti.sid" class="form-control" required oninvalid  placeholder="编号" disabled="disabled">
                  </div>
                </div>
                <!--姓名-->
                <div class="form-group">
                  <label for="sName" class="col-sm-2 control-label">姓名</label>
                  <div class="col-sm-10">
                    <input type="text" v-model="stuToEdti.sname"  required oninvalid class="form-control" id="sName" placeholder="姓名">
                  </div>
                </div>
                <!--专业-->
                <div class="form-group">
                  <label for="smajor" class="col-sm-2 control-label">专业</label>
                  <div class="col-sm-10">
                    <input type="text" v-model="stuToEdti.smajor"  required oninvalid class="form-control" id="smajor" placeholder="专业">
                  </div>
                </div>
                <!--入学时间-->
                <div class="form-group">
                  <label for="sTime" class="col-sm-2 control-label">入学时间</label>
                  <div class="col-sm-10">
                    <input type="date" v-model="stuToEdti.sdate" required oninvalid class="form-control" id="sTime" placeholder="入学时间">
                  </div>
                </div>
                <!--备注-->
                <div class="form-group">
                  <label for="sRemark" class="col-sm-2 control-label">备注</label>
                  <div class="col-sm-10">
                    <textarea class="form-control" rows="3" id="sRemark" placeholder="备注" v-text="stuToEdti.sremark"></textarea>
                  </div>
                </div>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary">修改</button>
              </div>
            </div>
          </form>
        </div>
      </div>
      <!--修改模态框尾-->

      <!--页面低端-->
      <!-- 底部 -->
      <div class="navbar navbar-default navbar-fixed-bottom" style="height: 50px;background-color: gainsboro;" >
        <div class="container" align="center" style="margin-top: -13px" >
          <ul class="pagination" >
            <li>
              <a href="#" @click="TopPg"  aria-label="Previous" >
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li>
              <a href="#" @click="pageBack" aria-label="Previous" >
                <span aria-hidden="true">&#139;</span>
              </a>
            </li>
            <li class="" v-for="n in countNum">
              <a href="#" @click="numberPg(n)" v-text="n">1<span class="sr-only">(current)</span></a>
            </li>
            <li>
              <a href="#" @click="pageNext()" id="pNext" aria-label="Next" >
                <span aria-hidden="true">&#155;</span>
              </a>
            </li>
            <li>
              <a href="#" @click="lastPg" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </div>
        <div style="float: right;margin-top: -60px;margin-right: 5px">
          <button type="button" class="btn btn-primary  glyphicon glyphicon-plus-sign" @click="queryStuId" data-toggle="modal" data-target="#myModalAdd" style="background-color: black">
            新增
          </button>
          <button type="button" class="btn btn-primary  glyphicon glyphicon-remove-circle" @click="removeBut"   id="removeBut" style="background-color: black">
            删除
          </button>
          <!--        确认删除-->
          <button type="button" id="removeButOk" @click="removeButOk" class="btn btn-danger  glyphicon glyphicon-ok-circle" style="display: none">
            确认删除
          </button>
          <!--        取消删除-->
          <button type="button" id="removeButNo" @click="removeButNo"  class="btn btn-danger  glyphicon glyphicon-remove-circle" style="display: none">
            取消删除
          </button>
        </div>
      </div>
      <!--页面低端尾-->
    </div>
    <!--新增模态框-->
    <div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
<!--        action="http://localhost:8001/student/save"-->
        <form class="form-horizontal" :model="stu_save" @submit="SaveStu">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
              <h4 class="modal-title" id="">新增学生</h4>
            </div>
            <div class="modal-body">

              <!--编号-->
              <div class="form-group">
                <label for="sId" class="col-sm-2 control-label">编号</label>
                <div class="col-sm-10">
                  <input type="hidden" v-model="stu_save.sid" id="hiddenId" name="sid">
                  <input type="text" v-model="stu_save.sid"  class="form-control" id="sId" placeholder="编号" disabled="disabled">
                </div>
              </div>
              <!--姓名-->
              <div class="form-group">
                <label for="sName" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                  <input type="text" v-model="stu_save.sname"  name="sname" required oninvalid class="form-control"  placeholder="姓名">
                </div>
              </div>
              <!--专业-->
              <div class="form-group">
                <label for="smajor" class="col-sm-2 control-label">专业</label>
                <div class="col-sm-10">
                  <input type="text" v-model="stu_save.smajor" name="smajor" required oninvalid class="form-control"  placeholder="专业">
                </div>
              </div>
              <!--入学时间-->
              <div class="form-group">
                <label for="sTime" class="col-sm-2 control-label">入学时间</label>
                <div class="col-sm-10">
                  <input type="date" v-model="stu_save.sdate" name="sdate" required oninvalid class="form-control"  placeholder="入学时间">
                </div>
              </div>
              <!--备注-->
              <div class="form-group">
                <label for="sRemark" class="col-sm-2 control-label">备注</label>
                <div class="col-sm-10">
                  <textarea class="form-control" v-model="stu_save.sremark" rows="3" name="sremark" placeholder="备注"></textarea>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="submit"  class="btn btn-primary">新增</button>
            </div>
          </div>
        </form>
      </div>
    </div>
<!--====-->
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      //存储学生信息集合
      studentList: [],
      //存储学生姓名参数
      sname:"",
      //存储修改查询学生信息
      stuToEdti: {
        sid:"",
        sname:"",
        smajor:"",
        sdate:"",
        sremark:""
      },
      //删除获取学号id
      stuNoId:"",
      //多选删除存储学号id
      removeCkArray:[],
      //设置每页数数量
      Count:4,
      //设置开始页数
      Pages:0,
      //存储总页数
      countNum:0,
      //存储数据总条数,
      pageSum:0,

      //存储学生添加的数据
      stu_save:{
        sid:"",
        sname:"",
        smajor: "",
        sdate: "",
        sremark: ""
      }
    }
  },
  created() {
    this.getStudentList();
    this.cuontPages();
  },
  methods: {
    //修改学生操作
    editStu(){
      let arr =[];
      arr.push(this.stuToEdti.sname);
      arr.push(this.stuToEdti.smajor);
      arr.push(this.stuToEdti.sdate);
      arr.push(this.stuToEdti.sremark)
      arr.push(this.stuToEdti.sid);
      this.axios.get("http://localhost:8001/student/edit",{
        params:{
          arr
        }
      }).then(response =>{
        console.log("修改成功")
      })
      $("#myModalEdit").modal("hide");
      this.getStudentList();
    },
    //学生信息添加操作
    SaveStu(){
      let arr =[];
      arr.push(this.stu_save.sid);
      arr.push(this.stu_save.sname);
      arr.push(this.stu_save.smajor);
      arr.push(this.stu_save.sdate);
      arr.push(this.stu_save.sremark);
      this.axios.get("http://localhost:8001/student/save",{
        params:{
            arr
        }
      }).then(response =>{
        console.log("添加成功")
      })

    },
    //一键到达顶页
    TopPg(){
      //0表示为第一页
      this.Pages=0;
      this.getStudentList();
    },
    //一键到达尾页
    lastPg(){
      //页数改变-- 总数据条数-每页数量=尾页索引
      //this.Pages=this.pageSum-this.Count;
      if(this.Pages<(this.pageSum-this.Count)){
        //页数改变-- 总数据条数-每页数量=尾页索引
        this.Pages=this.pageSum-this.Count;
        this.getStudentList();
      }else{
        alert("已到达尾页!");
      }

    },
    //点击数字换页
    numberPg(n){
      //页数改变-- (n表示第几页*每页数量)-每页数量  （从0开始查询为第一页） 结果得到要查询的页数
      this.Pages=(n*this.Count)-this.Count;
      this.getStudentList();

    },
    //上一页操作
    pageBack(){
      //this.Pages=this.Pages-this.Count;
      console.log(this.Pages);
      //页数改变  每点击一次  页数索引-每页数量  直到减到页数索引为0后停止 （0表示为第一页开始）
      if(this.Pages!=0){

        this.Pages=this.Pages-this.Count;
        this.getStudentList()
      }else{
        alert("已到达顶页!");
      }

    },
    //下一页操作
    pageNext(){
      //页数改变  每点击一次  页数索引+每页数量
      //直到家到页数索引为数据总条数后停止（0表示为第一页开始）
      //因为从0索引开始加 所以总数据条数要-每页页数数量
      //判断如果Pages的页数超过数据数量的页数则停止下一页
      if(this.Pages<(this.pageSum-this.Count)){
        //每点击一次页数发生改变
        this.Pages=this.Pages+this.Count;
        //回调方法
        this.getStudentList();
      }else{
        alert("已到达尾页!");
      }

    },
    //查询总页数
    cuontPages(){
      this.axios.get("http://localhost:8001/countpage").then(response =>{
        let num = response.data[0].pgCount;
        this.pageSum = num;
        console.log(num);
        let count = this.Count;
        let countNum = num/count;
        //获取一共多少页
        if(countNum>parseInt(countNum)){
          this.countNum=parseInt(countNum)+1;
        }else{
          this.countNum=countNum;
        }

      })
    },
    //多选删除隐藏
    removeBut(){
      $("input[name='removeCks']").toggle(true);
      $("#removeBut").toggle(false);
      //显示是否确认删除按钮
      $("#removeButOk").toggle(true);
      $("#removeButNo").toggle(true);
    },
    //取消删除按钮操作
    removeButNo(){
      //删除按钮显示
      $("#removeBut").toggle(true);
      //隐藏是否确认删除按钮
      $("#removeButOk").toggle(false);
      $("#removeButNo").toggle(false);
      //复选框隐藏
      $("input[name='removeCks']").toggle(false);
      //复选框选中自动取消
      $("input[name='removeCks']").prop("checked",false);
    },
    //多选删除确认删除操作
    removeButOk(){
      //遍历循环以选中的复选框
      var len = $("input[name='removeCks']:checked");
      for (var i=0;i<len.length;i++){
        this.removeCkArray.splice(0,0,len[i].value);
      }
      this.axios.get("http://localhost:8001/student/removeCk",{
        params:{
          "delArray":this.removeCkArray
        }
      }).then(response =>{

      })
      this.getStudentList();
      //重定向到Login主页面
      //window.location.href="http://localhost:8080/";
    },
    //确认删除
    removeStuOk(sid){
      this.axios.get("http://localhost:8001/student/delete",{
        params:{
          "sid":sid
        }
      })
      $("#myModalDel").modal("hide");
      //回调函数
      this.getStudentList();
      this.cuontPages();
    },
    //删除学生
    removeStu(sid){
      this.stuNoId=sid;
    },
    //修改查询
    toEdit(sid){
      this.   axios.get('http://localhost:8001/student/toedit',{
        params: {
          "sid":sid
        }
      }).then(response => {
        //后台查询得到学生信息赋值
        console.log(response.data);
        const obj = response.data[0];
        this.stuToEdti.sid = obj.sid;
        this.stuToEdti.sname = obj.sname;
        this.stuToEdti.smajor = obj.smajor;
        this.stuToEdti.sdate = obj.sdate;
        this.stuToEdti.sremark = obj.sremark;
      });
    },
    //带参查询
    queryParams() {
      this.getStudentList();
      this.Pages=0;
    },
    getStudentList() {
      this.axios.get('http://localhost:8001/student',{
        params:{
          "StuIdandName":this.sname,
          //页数
          "Pages":this.Pages,
          //每页数量
          "Count":this.Count
        }
      }).then(response => {
        console.log(response);
        this.studentList = response.data;
      });
    },
    //学生添加学生编号自动生成
    queryStuId(){
      this.axios.get("http://localhost:8001/student/stunoid").then(response => {
        // var stuid = $("#sId").val();
        this.stu_save.sid=response.data[0].sid+1;
        //alert(response.data[0].sid);
       // $("#hiddenId").val(stuid.val());
      });
    }
  }
}

</script>
<style  scoped>

</style>
